<template>
  <div class="wrapper w-full h-full">
    <canvas id="canvas" />
    <Loading />
    <TipBar />
  </div>
</template>
<script setup lang="ts">
import {
  CanvasTexture,
  Color,
  Scene,
  Sprite,
  SpriteMaterial,
  Vector3,
} from "three";
import { onMounted } from "vue";
import Loading from "../components/Loading.vue";
import InitScene from "../utils/InitScene";
import { defaultLoaderModel } from "../utils/LoaderModel";
import TipBar from "../components/TipBar.vue";
import { DefaultSelectOperate } from "../utils/SelectOperate";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer";
let canvas: HTMLCanvasElement | null;
let scene: Scene;
const defaultInitScene = new InitScene();
const url: string = "animal/scene.gltf";

const tipsSceneName: string[] = [
  "Plane.001_0-犀牛",
  "Plane.003_0-大象",
  "Plane.010_0-羚羊A",
  "Plane.014_0-羚羊B",
  "Plane.002_0-长颈鹿",
  "Plane.005_0-鸵鸟",
  "Plane.008_0-树",
];
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.pointerEvents = "none";
document.body.appendChild(labelRenderer.domElement);

function createLableObj(text: string, vector: any) {
  let laberDiv = document.createElement("div"); //创建div容器
  laberDiv.className = "laber_name";
  laberDiv.textContent = text + "\n" + "余量：123";
  let pointLabel = new CSS2DObject(laberDiv);

  


  pointLabel.position.set(0, vector.y,0);
  return pointLabel;
}

onMounted(() => {
  canvas = document.querySelector("#canvas");
  if (!canvas) return;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  defaultInitScene.init(canvas);
  document
    .querySelector(".wrapper")
    ?.appendChild(defaultInitScene.renderer.domElement);
  scene = defaultInitScene.scene;
  scene.background = new Color("#D6D7D8");
  defaultInitScene.addEventListener("animate", (e) => {
    labelRenderer.render(defaultInitScene.scene, defaultInitScene.camera);
  });

  defaultLoaderModel.load(url).addEventListener("loaded", (e) => {
    let { data } = e.data;
    let scene = data.scene;
    scene.scale.set(0.5, 0.5, 0.5);
    scene.traverse((res: any) => {
      if (res.isMesh) {
        tipsSceneName.findIndex((item) => {
          if (item.includes(res.userData.name)) {
            var worldVector = new Vector3();
            //获取网格模型boxMesh的世界坐标，赋值给worldVector
            res.getWorldPosition(worldVector);
            //世界坐标转标准设备坐标，standardVector是WebGL设备坐标
            var standardVector = worldVector.project(defaultInitScene.camera);
            let { x, y, z } = standardVector;
            x -= 8;
            y-= 10;
            let pointLabel = createLableObj(item, { x, y, z });
            
            res.add(pointLabel);
          }
        });
      }
    });
    defaultInitScene.scene.add(scene);
  });
  defaultInitScene.renderer.domElement.addEventListener("mousemove", (e) => {
    DefaultSelectOperate.handleMouse(
      e.clientX,
      e.clientY,
      defaultInitScene.camera,
      defaultInitScene.scene
    );
  });
});
</script>
<style>
.laber_name {
  color: rgb(0, 255, 255);
  font-size: 14px;
  padding: 20px;
  padding-top: 30px;
  background: url(./static/image/msg-bg.png) no-repeat;
  background-size: cover;
}
.laber_name::after {
  content: "";
  width: calc(100% + 22px);
  height: 39px;
  background-position: 0 0;
  position: absolute;
  bottom: -40px;
  left: -22px;
  background: url(./static/image/corner.png) no-repeat;
}
</style>
